<template>
    <div class="admin-login-box">
        <div class="admin-login-header-box">
            <div class="admin-login-header-center center">
                <div class="admin-login-logo">
                    博客系统 | 登录
                </div>
            </div>
        </div>
        <!-- 中间内容 -->
        <div class="admin-login-center-box">
            <div class="center login-center-box">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form label-position="right" label-width="100px">
                            <el-form-item label="账号" required>
                                <el-input v-model.trim="user.username" placeholder="用户名 / 邮箱地址"></el-input>
                            </el-form-item>
                            <el-form-item label="密码" required>
                                <el-input type="password" v-model.trim="user.password" placeholder="请输入密码"></el-input>
                            </el-form-item>
                            <el-form-item label="人类验证码" required>
                                <!-- 按回车键提交表单  @keyup.enter.native="doLogin" -->
                                <el-input v-model.trim="loginInfo.verifyCode" placeholder="请输入人类验证码"
                                          @keyup.enter.native="doLogin"></el-input>
                                <img :src="captchaPath" alt="" @click="updateVerifyCode" class="captcha_code">
                            </el-form-item>
                            <el-form-item class="login-button">
                                <el-button type="primary" size="small" @click="doLogin">登录</el-button>
                            </el-form-item>
                        </el-form>
                    </el-col>
                </el-row>
            </div>
        </div>
        <!-- 底部内容-->
    </div>
</template>

<script>
    import {doLogin} from "@/api/api";

    export default {
        name: "Login",
        data() {
            return {
                user: {
                    username: '',
                    password: ''
                },
                loginInfo: {
                    captcha_key: '',
                    verifyCode: '',
                    from: ''
                },
                captchaPath: ''

            }
        },
        methods: {
            // 登录
            doLogin() {
                // 发起登录
                if (this.user.username === '') {
                    this.$message.error('用户名不可以为空')
                    return;
                }
                if (this.user.password === '') {
                    this.$message.error('密码不可以为空')
                    return;
                }
                if (this.loginInfo.verifyCode === '') {
                    this.$message.error('人类验证码不能为空')
                    return;
                }
                // 向服务器提交数据
                doLogin(this.loginInfo.verifyCode, this.loginInfo.captcha_key, this.user).then(result => {
                    // console.log('====> ', result)
                    // 处理结果
                    // 判断状态
                    if (result.code === 20000) {
                        // 如果是成功 一一>断角色，如果是普通用户，跳转到门户首页，如果是管理员，跳转到管理中心
                        // 其他，给出提示
                        this.$message.success(result.message)
                        this.$router.push({path: '/index'})
                    } else {
                        // 更新一下验证码
                        this.updateVerifyCode()
                        this.$message.error(result.message)
                    }
                })
            },
            // 点击改变验证码
            updateVerifyCode() {
                // this.captchaPath = 'http://localhost:2021/user/captcha?captcha_key=' + this.loginInfo.captcha_key + "&random=" + Date.parse(new Date());
                this.captchaPath = '/user/captcha?captcha_key=' + this.loginInfo.captcha_key + "&random=" + Date.parse(new Date());
                // console.log(this.captchaPath)
            }
        },
        mounted() {
            // TODO 检查登录是否有效
            // 如果已经登录，跳转到对应的页面
            this.loginInfo.captcha_key = Date.parse(new Date());
            this.updateVerifyCode()  // 验证码
        }
    }
</script>
<style>
    /* 点击验证码手形 */
    .captcha_code {
        cursor: pointer;
        vertical-align: middle;
        margin-left: 10px;
        border: solid 1px #E6E6E6;
        padding-left: 10px;
        padding-right: 10px;
        width: 120px;
        height: 38px;
    }

    .login-button {
        margin-bottom: 0;
    }

    .admin-login-header-box {
        width: 100%;
        height: 46px;
        margin-bottom: 20px;
        background: dodgerblue;
    }

    .center {
        margin: 0 auto;
        width: 1140px;
    }

    .admin-login-header-center {
        line-height: 46px;
    }

    /* 调正验证码位置 */
    .login-center-box .el-input {
        width: 200px;
    }

    .login-center-box {
        border-radius: 4px;
        width: 1100px;
        padding: 20px;
        background: #fff;
        box-shadow: 0 1px 10px #afafaf;
    }

    .admin-login-logo {
        color: #fff;
        font-size: 18px;
        font-weight: 600;
    }

    .login-center-box .el-input__inner {
        border: solid 1px #E6E6E6;
        height: 42px;
        border-radius: 0;
    }

    .login-center-box .el-form-item__label {
        background: #FBFBFB;
        border-left: solid 1px #E6E6E6;
        border-top: solid 1px #E6E6E6;
        border-bottom: solid 1px #E6E6E6;
        text-align: center;
    }
</style>